<template>
	<view class="DetailsBox" :style="{ '--color': color }">
		<status-bar title="详情" hideBg="1" :back="back"></status-bar>

		<view class="Onfo">
			<image :src="$imgUrls(site_time.img)" mode="aspectFill" class="Img"></image>
			<view class="TxtOnfo">
				<text class="black size30">{{ site_time.name }}</text>
				<text class="Time">购买时间：{{ info.add_time }}</text>
				<text class="Time">开宴时间：{{ site_time.open_date_time }}</text>
			</view>
			<text class="Waiting stateTXT a-self-start" v-if="info.state == 1">待使用</text>
			<text class="color_ff4 stateTXT a-self-start" v-if="info.state == 3 && info.tail_price != 0">待付尾款</text>
			<text class="color_ff4 stateTXT a-self-start" v-if="info.state == 3 && info.tail_price == 0">待核销</text>
			<text class="used stateTXT a-self-start" v-if="info.state == 2">已使用</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 4">已过期</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 5">已退款</text>
			<text class="expiredbg stateTXT a-self-start" v-if="info.state == 6">退款中</text>
		</view>

		<view class="content">
			<view class="black size30">预约信息</view>
			<view class="List">
				<text class="title">预约单号</text>
				<text class="title">{{ info.scan_order_code }}</text>
			</view>
			<view class="List">
				<text class="title">预约日期</text>
				<text class="title">{{ info.add_time }}</text>
			</view>
			<view class="List">
				<text class="title">联系人</text>
				<text class="title">{{ info.user_name }}</text>
			</view>
			<view class="List">
				<text class="title">联系电话</text>
				<text class="title">{{ info.user_tel }}</text>
			</view>
			<view class="row j-sb a-center m-top40">
				<view class="contact" @click="$common.Tel(pageData.service_tel)">
					<view class="iconfont icon-kefu color_99 size60"></view>
					<view class="d-flex f-column CallInfo">
						<text class="CallInfo">客服热线</text>
						<text class="CallInfo">{{ pageData.service_tel }}</text>
					</view>
				</view>
				<view class="contact" @click="Refund = true">
					<view class="iconfont icon-shouye color_99 size60"></view>
					<view class="d-flex f-column CallInfo">
						<text class="CallInfo">全额退款</text>
						<text class="CallInfo">开宴前{{ site_time.cancel_hour }}小时</text>
					</view>
				</view>
			</view>
		</view>

		<view class="banquet">
			<view class="black size30 p-left20">座席信息</view>
			<view class="banList bot" v-for="(item, index) in info.sites_detail" :key="index">
				<view class="Bnakine">{{ item.type_name }}-{{ item.name }}</view>
				<view class="bnaid">
					<text class="title">{{ item.goods.name }}</text>
					<text class="title" v-if="info.state != 3">￥{{ item.site_price }}</text>
					<text class="title" v-else>定金：￥{{ item.order_price }}</text>
				</view>
				<view class="bnaid" v-if="item.make_up_price">
					<view class="d-flex a-center">
						<text class="title">妆造预约</text>
						<text class="title m-left20">{{ item.make_up_date_str }}</text>
					</view>
					<text class="title">￥{{ item.make_up_price }}</text>
				</view>
			</view>
		</view>

		<view class="favorable" v-if="info.num > 0">
			<view class="black size30 p-left20">优惠抵扣</view>
			<view class="PriceList">
				<view class="bnaid">
					<text class="title">美团劵</text>
					<text class="title">X{{ info.num }}</text>
				</view>
			</view>
		</view>

		<view class="PriceInfo">
			<view class="black size30 p-left20">支付信息</view>
			<view class="PriceList">
				<view class="bnaid">
					<text class="title">定金</text>
					<text class="title">￥{{ info.order_price }}</text>
				</view>
				<view class="bnaid" v-if="info.state != 3">
					<text class="title">妆造价格</text>
					<text class="title">￥{{ info.make_up_price }}</text>
				</view>
				<view class="bnaid" v-if="info.tail_price > 0">
					<text class="title">{{ Copewith }}尾款</text>
					<text class="title">￥{{ info.tail_price }}</text>
				</view>
				<view class="bnaid" v-if="info.state != 3">
					<text class="title">支付价格</text>
					<text class="title">￥{{ info.payment }}</text>
				</view>
				<view class="bnaid" v-if="info.need_refuse_money && info.need_refuse_money > 0">
					<text class="color_ff2 size26">应退定金</text>
					<text class="color_ff2 size26">￥{{ info.need_refuse_money }}</text>
				</view>
			</view>
		</view>

		<view class="row j-centert m-top50" v-if="info.state == 1 || info.state == 3">
			<view class="botBtn flexac f-column" v-if="info.state == 3 && info.tail_price != 0" @click="finalPayment">
				<text class="h6">￥{{ info.tail_price }}</text>
				<view class="h6">支付尾款</view>
			</view>
			<view class="botBtn flexac size30" @click="show = true">核销码</view>
		</view>

		<u-popup :show="show" @close="show = false" mode="center" round="5" :duration="200" :safeAreaInsetBottom="false">
			<view class="Upopup">
				<text class="Utitle">莅临现场并出示给工作人员</text>
				<image :src="$imgUrls(info.qr_code)" class="Ucode"></image>
				<text class="Uorder">{{ info.scan_order_code }}</text>
				<block v-if="info.state == 3 && info.tail_price != 0">
					<text class="color_ff4 size30 m-top20">需要支付尾款 ￥{{ info.tail_price }}</text>
					<view class="Ubtn" @click.stop="finalPayment">立即支付</view>
				</block>
			</view>
		</u-popup>

		<u-popup :show="Refund" @close="Refund = false" mode="bottom" round="10" closeable :duration="200">
			<view class="RefundBox">
				<view class="row j-centert black size30">全额退款说明</view>
				<view class="rows m-top30">
					<u-parse :content="pageData.refuse_desc" :domain="imgUrl"></u-parse>
				</view>

				<view class="row j-sb p-left30 p-right30 m-top50" v-if="info.state == 1 || info.state == 3">
					<view class="botBtn flexac size30" @click="refuseOrder">确定退款</view>
					<view class="botBtn Cancel flexac size30" @click.stop="Refund = false">取消</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
export default {
	data() {
		return {
			color: '#d7b06d',
			show: false,
			Refund: false,
			order_id: '',
			pageData: '',
			info: '',
			site_time: '',
			downTime: null
		};
	},
	onLoad(opt) {
		if (opt.id) this.order_id = opt.id;
		this.getLockOrder();
	},
	onShow() {
		// #ifdef MP-WEIXIN
		let that = this;
		let options = wx.getEnterOptionsSync();
		if (options.scene == '1038' && options.referrerInfo.appId == 'wxef277996acc166c3') {
			let extraData = options.referrerInfo.extraData;
			if (!extraData) return;
			if (extraData.code == 'success') {
				that.getLockOrder();
			}
		}
		// #endif
		this.Refresh();
	},

	methods: {
		getLockOrder() {
			this.$http
				.get({
					url: '/SiteApi/getLockOrder',
					data: {
						order_id: this.order_id
					}
				})
				.then((res) => {
					if (res.code != 200) return this.$Toast(res.msg, 2);
					const Result = res.data;
					this.pageData = Result;
					this.info = Result.info;
					this.site_time = Result.site_time;
				});
		},
		finalPayment() {
			let that = this;
			this.$showLoading('');
			this.$http
				.get({
					url: '/SiteApi/getTailPayInfo',
					data: {
						order_id: this.order_id
					}
				})
				.then((res) => {
					this.$hideLoading();
					if (res.code != '100') return this.$Toast(res.msg);
					const Result = res.data;
					// #ifdef MP-WEIXIN
					if (Result.extraData) {
						wx.openEmbeddedMiniProgram({
							appId: Result.appId,
							extraData: Result.extraData
						});
						return;
					}
					uni.getProvider({
						service: 'oauth',
						success: function (resp) {
							console.log(resp.provider);
							if (resp.provider) {
								uni.requestPayment({
									provider: resp.provider[0],
									orderInfo: Result,
									timeStamp: Result.timeStamp,
									nonceStr: Result.nonceStr,
									package: Result.package,
									signType: Result.signType,
									paySign: Result.paySign,
									success: function (resj) {
										that.getLockOrder();
									},
									fail: function (err) {
										console.log('fail:' + JSON.stringify(err));
									}
								});
							}
						}
					});
					// #endif
				});
		},
		refuseOrder() {
			this.Refund = false;
			this.$showLoading('');
			this.$http
				.post({
					url: '/SiteApi/refuseOrder',
					data: {
						id: this.order_id
					}
				})
				.then((res) => {
					this.$hideLoading();
					if (res.code != 200) return this.$Toast(res.msg);
					this.$Toast(res.msg);
					this.getLockOrder();
				});
		},
		CloseTime() {
			clearInterval(this.downTime);
			this.downTime = null;
		},
		Refresh() {
			this.downTime = setInterval(() => {
				this.getLockOrder();
			}, 6000);
		}
	},
	computed: {
		Copewith() {
			return this.info.state == 3 ? '应付' : '';
		}
	},
	onHide() {
		this.CloseTime();
	},
	onUnload() {
		this.CloseTime();
	}
};
</script>

<style>
page {
	background-color: #f5ecda;
	padding-bottom: 40rpx;
}
</style>
<style lang="scss" scoped>
.DetailsBox {
	width: 100%;
	box-sizing: content-box;
	padding-bottom: constant(safe-area-inset-bottom);
	padding-bottom: env(safe-area-inset-bottom);
}
.Onfo {
	width: 690rpx;
	margin: 0 auto;
	display: flex;
	align-items: center;
	padding-top: 20rpx;
}
.Img {
	width: 120rpx;
	height: 120rpx;
	border-radius: 10rpx;
	margin-right: 20rpx;
}
.TxtOnfo {
	flex: 1;
	display: flex;
	flex-direction: column;
}
.Time {
	color: #999;
	font-size: 22rpx;
	margin-top: 8rpx;
}
.stateTXT {
	font-size: 28rpx;
	margin-left: 20rpx;
}
.Waiting {
	color: #009933;
}
.used {
	color: #333;
}
.expiredbg {
	color: #bcbcbc;
}
.content {
	width: 690rpx;
	margin: 24rpx auto 0;
	background-color: #ffffff;
	padding: 20rpx;
	border-radius: 10rpx;
}
.List {
	width: 100%;
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 24rpx;
}
.title {
	color: #333;
	font-size: 26rpx;
}
.contact {
	display: flex;
	align-items: center;
}
.CallInfo {
	color: #333;
	font-size: 24rpx;
	margin-left: 10rpx;
}
.banquet {
	width: 690rpx;
	margin: 24rpx auto 0;
	background-color: #ffffff;
	padding: 20rpx 0;
	border-radius: 10rpx;
}
.banList {
	width: 100%;
	padding: 24rpx 20rpx 24rpx 20rpx;
}
.PriceList {
	width: 100%;
	padding: 10rpx 20rpx;
}
.Bnakine {
	padding: 4rpx 14rpx;
	background-color: #fff2de;
	border-radius: 8rpx;
	font-size: 24rpx;
	border: 1rpx solid var(--color);
	color: var(--color);
	display: inline-block;
}
.bnaid {
	width: 100%;
	display: flex;
	justify-content: space-between;
	padding: 0 20rpx;
	margin-top: 20rpx;
}
.PriceInfo {
	width: 690rpx;
	width: 690rpx;
	margin: 24rpx auto 0;
	background-color: #ffffff;
	padding: 20rpx 0;
	border-radius: 10rpx;
}
.botBtn {
	width: 240rpx;
	height: 76rpx;
	background-color: #d7b06d;
	border-radius: 8rpx;
	color: #fff;
	margin: 0 20rpx;
}
// .Cancel{
// 	background-color: #f5ecda !important;
// 	color:#999;
// }
.Upopup {
	width: 580rpx;
	padding: 30rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
}
.Utitle {
	color: #000;
	font-size: 30rpx;
}
.Ucode {
	width: 480rpx;
	height: 480rpx;
	margin-top: 20rpx;
}
.Uorder {
	color: #000;
	font-size: 28rpx;
	margin-top: 20rpx;
}
.Ubtn {
	width: 240rpx;
	height: 70rpx;
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	font-size: 28rpx;
	border-radius: 8rpx;
	background-color: #d7b06d;
	margin-top: 20rpx;
}
.RefundBox {
	width: 100%;
	padding: 50rpx 30rpx 50rpx 30rpx;
	display: flex;
	flex-direction: column;
}
.favorable {
	width: 690rpx;
	margin: 24rpx auto 0;
	background-color: #ffffff;
	padding: 20rpx 0;
	border-radius: 10rpx;
}
</style>